<jsp:useBean id="bean" class="phylacterium.beans.MapBean" scope="request" />
<%@page import="phylacterium.tools.Utils"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><%=Utils.getPageTitle(request)%></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link href='http://fonts.googleapis.com/css?family=Arvo'
	rel='stylesheet' type='text/css'>
	<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
	<link rel="icon" type="image/png" href="images/logo.png">
 <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyABElJFU4bNpgBzdlgrh53kZGco7Ued424&sensor=false"></script>

<script type="text/javascript">
	    //<![CDATA[
	    var map;
	    var markers = [];
	    var infoWindow;
	    var locationSelect;

	    function load() {

		map = new google.maps.Map(document.getElementById("map"), {
			center: new google.maps.LatLng(52.402707, 16.950703),
			zoom: 16,
			mapTypeId: 'roadmap',
			mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
		});

		infoWindow = new google.maps.InfoWindow();
		locationSelect = document.getElementById("locationSelect");
		locationSelect.onchange = function() {
			var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
			if (markerNum != "none"){
				google.maps.event.trigger(markers[markerNum], 'click');
			}
		};
		findPOIs();
	//alert("Bum yeah");
	   }
function findPOIs() {
	     clearLocations(); 
	     var radius = document.getElementById('user').value;
		//alert("Bum:"+radius);
	     var searchUrl = './../JavaBridgeTemplate621/getmarkers.php?user='+radius;
//alert("req:"+searchUrl);
	     downloadUrl(searchUrl, function(data) {
		//alert("resp:"+data);
		//createMarker(new google.maps.LatLng(40, -100), searchUrl, data);
	       var xml = parseXml(data);
	       var markerNodes = xml.documentElement.getElementsByTagName("marker");
	       var bounds = new google.maps.LatLngBounds();
	       for (var i = 0; i < markerNodes.length; i++) {
		 var name = markerNodes[i].getAttribute("name");
		 var desc = markerNodes[i].getAttribute("description");
		 desc +="\nMost played:"
		 var added ="";
		 for (var j = 1; j <= 3; j++) {
			var track = markerNodes[i].getAttribute("track"+j);
			if(track != null && track !=""){
				added+="\n"+j+":"+track;
			}
		 }
		 if(added != ""){
		 	desc+=added;
		 }else
		 	desc+="no tracks";
		 var latlng = new google.maps.LatLng(
		      parseFloat(markerNodes[i].getAttribute("lat")),
		      parseFloat(markerNodes[i].getAttribute("lng")));

		 //createOption(name, "1", i);
		 createMarker(latlng, name, desc);
		 //bounds.extend(latlng);
	       }
	       //map.fitBounds(bounds);
	       locationSelect.style.visibility = "visible";
	       locationSelect.onchange = function() {
		 var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
		 google.maps.event.trigger(markers[markerNum], 'click');
	       };
	      });
	    }
	 
 function clearOverlays() {
	    if (markers) {
	      for (i in markers) {
		markers[i].setMap(null);
	      }
	    }
	  }
 

	    function createOption(name, distance, num) {
	      var option = document.createElement("option");
	      option.value = num;
	      option.innerHTML = name + "(" + distance.toFixed(1) + ")";
	      locationSelect.appendChild(option);
	    }

	    function downloadUrl(url, callback) {
	      var request = window.ActiveXObject ?
		  new ActiveXObject('Microsoft.XMLHTTP') :
		  new XMLHttpRequest;

	      request.onreadystatechange = function() {
		if (request.readyState == 4) {
		  request.onreadystatechange = doNothing;
	//alert("resp:"+request.responseText+"stat:"+request.status);
		  callback(request.responseText, request.status);
		}
	      };

	      request.open('GET', url, true);
	      request.send(null);
	    }

	    function pushPOI(url) {
	      var request = window.ActiveXObject ?
		  new ActiveXObject('Microsoft.XMLHTTP') :
		  new XMLHttpRequest;
	//alert("Bum"+url);
	      request.open('GET', url, false);

	//request.setRequestHeader("Content-type", "text/xml;charset=UTF-8");
	//request.setRequestHeader("From", "morek@interia.pl");
	//request.setRequestHeader("SOAPAction","");
	//alert(url);
	      request.send(null);
	//alert("Cyk");
	var strResult=request.responseText;

	//alert("Cyk"+strResult);
	    }

	    function parseXml(str) {
	      if (window.ActiveXObject) {
		var doc = new ActiveXObject('Microsoft.XMLDOM');
		doc.loadXML(str);
		return doc;
	      } else if (window.DOMParser) {
		return (new DOMParser).parseFromString(str, 'text/xml');
	      }
	    }

	    function doNothing() {}
	// Removes the overlays from the map, but keeps them in the array
	 

	  // Shows any overlays currently in the array
	  function showOverlays() {
	    if (markers) {
	      for (i in markers) {
		markers[i].setMap(map);
	      }
	    }
	  }
	function addMarkerClick(){
	google.maps.event.addListener(map, 'click', function(event) {
	      addMarker(event.latLng);
	    });
	  }
	  
	  function addMarker(location) {
	google.maps.event.clearListeners(map, 'click');
	    if(document.getElementById('markerName').value==""){
		alert("Proszę wypełnić pole Name oraz opcjonalnie Descrition");
	    }else{
	//alert("Dodaję");
		createMarker(location,document.getElementById('markerName').value,document.getElementById('markerDescription').value);
		pushPOI("./../JavaBridgeTemplate621/getmarkers.php?name="+document.getElementById('markerName').value+"&description="+document.getElementById('markerDescription').value+"&lng="+location.lng()+"&lat="+location.lat()+"&user="+document.getElementById('user').value);
	alert("Dodałem");
	    }
	  }

function clearLocations() {
	
	     infoWindow.close();
	     for (var i = 0; i < markers.length; i++) {
	       markers[i].setMap(null);
	     }
	     markers.length = 0;

	     locationSelect.innerHTML = "";
	     var option = document.createElement("option");
	     option.value = "none";
	     option.innerHTML = "See all results:";
	     locationSelect.appendChild(option);
	   }

	   function createMarker(latlng, poiname, address) {
	      var html = "<b>" + poiname + "</b> <br>" + address;
	      var marker = new google.maps.Marker({
		map: map,
		position: latlng
	      });
	      google.maps.event.addListener(marker, 'click', function() {
		infoWindow.setContent(html);
		infoWindow.open(map, marker);
	      });
	      markers.push(marker);
	    }

	 	    //]]>
</script>
</head>
<body onload="load()">
	<div id="wrapper">
		<div id="header-wrapper">
			<div id="header">
				<div id="logo">
					<center>
					<table>
						<tr>
							<td rowspan=2><img src="images/logo.png"
								style="width: 120px" /></td>
							<td><h1>
									<a href="homepage">Phylacterium</a>
								</h1></td>
						</tr>
						<tr>
							<td><p align="left" style="color: #FFFFFF">your music's got soul</p></td>
						</tr>
					</table>
					</center>
				</div>
			</div>
		</div>
		<%
			if (session == null || session.getAttribute("userId") == null
					|| session.getAttribute("userName") == null) {
		%>
		<div id="menu">
			<ul>
				<li <%=Utils.checkRequestPage(request, "homepage.jsp")%>><a
					href="homepage">Homepage</a></li>
				<li <%=Utils.checkRequestPage(request, "map.jsp")%>><a
					href="map">Map</a></li>
				<li <%=Utils.checkRequestPage(request, "statistics.jsp")%>><a
					href="statistics">Statistics</a></li>
				<li <%=Utils.checkRequestPage(request, "register.jsp")%>><a
					href="register" class="current_page_item">Register</a></li>
				<li <%=Utils.checkRequestPage(request, "login.jsp")%>><a
					href="login">Login</a></li>
			</ul>
		</div>
		<%
			} else {
		%>
		<div id="login">
			<p align="right">
				<b>Logged as:&nbsp&nbsp&nbsp<%=session.getAttribute("userName")%></b>
			</p>
		</div>
		<div id="menu">
			<ul>
				<li <%=Utils.checkRequestPage(request, "homepage.jsp")%>><a
					href="homepage">Homepage</a></li>
				<li <%=Utils.checkRequestPage(request, "map.jsp")%>><a
					href="map">Map</a></li>
				<li <%=Utils.checkRequestPage(request, "statistics.jsp")%>><a
					href="statistics">Statistics</a></li>
				<li <%=Utils.checkRequestPage(request, "account.jsp")%>><a
					href="account">My account</a></li>
				<li <%=Utils.checkRequestPage(request, "login.jsp")%>><a
					href="login">Logout</a></li>
			</ul>
		</div>

		<%
			}
		%>
	</div>
<div id="page">
	<div>
			<!-- 	End of header -->

     <input type="hidden" id="user" size="10" value="<%=session.getAttribute("userId")%>"/>
	Marker Name:<input type="text" id="markerName" size="10"/>
	Marker Description:<input type="text" id="markerDescription" size="15"/>
	<input onclick="clearOverlays();" type=button value="Clear Overlays"/>
    <input onclick="showOverlays();" type=button value="Show All Overlays"/>
	<input onclick="addMarkerClick();" type=button value="Add POI"/>
    
    </div>
    <div><select id="locationSelect" style="width:100%;visibility:hidden"></select></div>
    <div id="map" style="width: 100%; height: 500"></div>
<!-- Tu mozna juz pisac strone (wewnatrz body)-->
</div>
</body>
</html>
